<template>
	<!-- 休闲娱乐 -->
	<view class="Aroundmain">
		
		<!-- 轮播图 -->
		<swiper indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)" class="swiper"
		 :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
			<swiper-item v-for="item in bannerlist" :key="item.vid">
				<view class="swiper-item uni-bg-red">
					<image class="swiperimage" :src="item.bannerImage" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="shop" v-for="item in allList" :key="item.id">
			<view class="shopimg" @click="tdetails(item.id)">
				<image :src="item.images" mode=""></image>
			</view>
			<view class="shopword">
				<!-- <text class="shoptitle">{{item.commodityName}}</text> -->
				<view class="vshopname">
					<text class="shopname">{{item.commodityName}}</text>
				</view>
				<view class="shopint">
					<text>{{item.explains}}</text>
				</view>
				<view class="monthgod">
				<!-- 	<text>月售{{item.salesVolume}}</text> -->
				</view>
				<view class="shopmoney">
					<text style="font-size: 20rpx;color: #000000;">￥</text>
					<text style="color: #FF6633;font-size: 34rpx;">{{item.currentPrice}}</text>
					<text style="color: #999999;font-size: 20rpx;font-weight:bold;text-decoration: line-through;margin-left: 20rpx;">{{item.originalPrice}}</text>
					<!-- <view class="Qshare">
						<text>一键分享</text>
					</view> -->
					<view class="Qbuy" @click="tdetails(item.id)">
						<text>抢购</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import http from '@/common/request.js';
	export default {
		data() {
			return {
				allList: [],
				curntpage: 1, //加载页数
				allPage: '', //数据总页数
				bannerlist: [],
				autoplay: true,
				duration: 500,
				interval: 2000,
				circular: true,
			}
		},
		onLoad() {
			this.getImages()
			this.getAllList()
		},
		
		onPullDownRefresh() {
			// 刷新初始化数据
			this.size = 10
			this.current = 1
			// 调用获取数据的函数
			this.getAllList()
			// 关闭刷新动画
			setTimeout(function(){
				uni.stopPullDownRefresh()
			},1000)
		},
		
		// 上拉加载
		onReachBottom() {
			console.log('触底')
			console.log(this.curntpage)
			console.log(this.allPage)
			if (this.curntpage == this.allPage) {
				console.log('当前访问页面已经到最后一页')
				uni.showToast({
					title: '当前访问页面已经到最后一页',
					icon: "none",
				})
		
			} else {
				this.curntpage++
				setTimeout(() => {
					// 调用请求数据的方法
					this.getAllList()
				}, 300)
			}
		},

		methods: {
			getImages(){
				// 轮播图
				const requestParam = {
					url: `/api/commodity/banner/list`,
					method: "POST",
					data: {
						vid: 1,
						current: 1,
						size: 10
					},
					callBack: (res) => {
						if (res.code == 200) {
							this.bannerlist = res.data
						}
					}
				}
				this.$http.request(requestParam)
			},
			
			getAllList() {
				uni.showLoading({
					icon: 'none',
					title: "加载..."
				})
				const requestAll = {
					url: `/api/commodity/selectTypeCommodity`,
					method: "POST",
					data: {
						vid: 3,
						current: 1,
						size: 10,
						sort: 0,
					},
					callBack: (res) => {
						uni.hideLoading()
						if(res.code == 200){
						this.text = 'request success';
						this.allList = res.data.records
						// console.log(this.allList)
						}
					}
				}
				this.$http.request(requestAll)
			},
			tdetails(e) {
				uni.navigateTo({
					url: './Hotdetails?sid=' + e
				})
			}
		}
	}
</script>

<style>
	/* 轮播图 */
	.swiper {
		width: 100%;
		height: 250rpx;
		border: 2rpx solid #ECECEC;
	}
	
	.swiperimage {
		width: 100%;
		height: 250rpx;
	}
	
	.shopint {
		margin: 10rpx 20rpx;
	}

	.shopint text {
		font-size: 24rpx;
		color: #000000;
		/* white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; */

	}

	.Aroundmain {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.shop {
		height: 200rpx;
		background-color: #FFFFFF;
		border-bottom: 4rpx solid #F1F1F1;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.shopimg image {
		width: 200rpx;
		height: 200rpx;
	}

	.shoptitle {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.vshopname {
		margin-top: 15rpx;
	}

	.shopname {
		font-size: 24rpx;
		color: #000000;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.monthgod {
		font-size: 20rpx;
		color: #000000;
		margin: 10rpx 18rpx;
	}

	.shopmoney {
		margin-top: 6rpx;
		margin-left: 20rpx;
	}

	.Qshare {
		width: 116rpx;
		height: 44rpx;
		background-color: #FCC100;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		line-height: 44rpx;
		position: absolute;
		bottom: 75rpx;
		right: 20rpx;
	}

	.shopmoney .Qbuy {
		width: 86rpx;
		height: 44rpx;
		background-color: #FCC100;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		line-height: 44rpx;
		position: absolute;
		bottom: 25rpx;
		right: 20rpx;
	}
</style>
